<template>
  <div>
    <el-form
      ref="dataForm"
      :model="formBase"
      label-position="right"
      label-width="100px"
      style="width:700px;"
    >
      <el-form-item label="部门：">
        <el-select v-model="value" placeholder="请选择" @change="attendanceSettingByDepartId">
          <el-option
            v-for="item in departmentData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <!-- 出勤时间 -->
      <el-form-item label="出勤时间：" prop="morningStartTime">
        <el-time-picker
          v-model="formBase.morningStartTime"
          :picker-options="{
            start: '00:00',
            step: '00:05',
            end: '23:59'
          }"
          :placeholder="formBase.morningStartTime"
          class="timePicker"
        />-
        <el-time-select
          v-model="formBase.morningEndTime"
          :picker-options="{
            start: '08:30',
            step: '00:15',
            end: '18:30'
          }"
          :placeholder="formBase.morningEndTime"
          class="timePicker"
        />

        <el-time-select
          v-model="formBase.afternoonStartTime"
          :picker-options="{
            start: '08:30',
            step: '00:15',
            end: '18:30'
          }"
          :placeholder="formBase.afternoonStartTime"
          class="timePicker"
        />-
        <el-time-select
          v-model="formBase.afternoonEndTime"
          :picker-options="{
            start: '08:30',
            step: '00:15',
            end: '18:30'
          }"
          :placeholder="formBase.afternoonEndTime"
          class="timePicker"
        />
      </el-form-item>
    </el-form>

    <!-- 按钮 -->
    <div class="el-dialog__footer dialog-footer">
      <el-button type="primary" @click="handleAttendance">保存更新</el-button>
      <el-button @click="handleClose">取消</el-button>
    </div>
  </div>
</template>

<script>
import { getDepartments } from '@/api/departments'
import { attendanceSettingByDepartId, attendanceSave } from '@/api/attendances'
import attendanceApi from '@/api/constant/attendance'

export default {
  props: {
    showSetting: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formBase: {
        morningStartTime: '',
        morningEndTime: '',
        afternoonStartTime: '',
        afternoonEndTime: '',
        departmentId: ''
      },
      value: '总裁办',
      // 部门数据
      departmentData: [],
      // 部门出勤设置数据
      attenList: [],
      stateData: [],
      tylelist: [],
      deductionList: [],
      oldNum: '',
      rules: {
        // 表单验证
        departmentId: [
          { required: true, message: '请选择部门', trigger: 'change' }
        ],
        morningStartTime: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ]
      },
      overtimeRule: {
        // 表单验证
        unit: [
          { required: true, message: '调休单位不能为空(', trigger: 'blur' }
        ],
        departmentId: [
          { required: true, message: '请选择部门', trigger: 'change' }
        ],
        isClock: [
          { required: true, message: '请选择打卡验证', trigger: 'change' }
        ],
        isCompensationint: [
          { required: true, message: '请选择补偿', trigger: 'change' }
        ],
        latestEffectDate: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ]
      }

      // 出勤设置
      // attendList: []

    }
  },
  created() {
    this.getDepartments()
    this.stateData = attendanceApi
  },
  methods: {
    //   获取部门列表
    async getDepartments() {
      const { depts } = await getDepartments()
      this.departmentData = depts
    },
    // 根据部门 id 出勤选择部门
    async attendanceSettingByDepartId(val) {
      // 因为拿到的数据类型为 formData  对此数据类型需要特殊处理
      const fd = new FormData()
      fd.append('departmentId', val)
      const res = await attendanceSettingByDepartId(fd)
      this.formBase = res
      console.log(this.formBase)
    },

    // 考勤配置保存更新
    async  handleAttendance() {
      this.$refs.dataForm.validate(async valid => {
        if (valid) {
          await attendanceSave(this.formBase)
          this.$message.success('操作成功')
          this.handleClose()
        }
      })
    },

    handleClose() {
      this.$refs.dataForm.resetFields()
      // 关闭弹窗
      this.$emit('update:showSetting', false)
    }

  }
}
</script>

<style lang="scss" scoped>

</style>
